<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
		<style type="text/css">
			input{
	 			display: block;
	 			width: 150px;
	 		}
	 		button{
	 			display: block;
	 		}
	 		ol{
	 			color: green;
	 		}
	 		div{
	 			color: red;
	 		}
		</style>
	</head>
	<body>
		<input id="inputCity" type="search" name="" placeholder="输入您要查询的城市">
		<br>
		<button id="getCity">获取城市</button>
	</body>
	<script type="text/javascript">
		$(function () {
			$('#getCity').click(function () {
				$.ajax({
					
					url:"http://apis.baidu.com/apistore/weatherservice/citylist",
					type:"get",
					data:"cityname="+$('#inputCity').val(),
					dataType:'json',
					headers:{'apikey':'e821ffde237b29e45e118a2f3a13fe8d'},
				    success:function(data) {
				    	// area_id:"101181101"
						// district_cn:"焦作"
						// name_cn:"焦作"
						// name_en:"jiaozuo"
						// province_cn:"河南"
						console.log(data);
				    	cityid=data.retData[0].area_id;
				    	cityname=data.retData[0].name_cn;
				    	$("#getCity").after("<div>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp城市:"+cityname+"</div>");
				    	
				    	$.ajax({
							url:"http://apis.baidu.com/apistore/weatherservice/recentweathers",
							type:"get",
							data:"cityname="+cityname+"&"+"cityid="+cityid,
							dataType:'json',
							headers:{'apikey':'e821ffde237b29e45e118a2f3a13fe8d'},
						    success:function(data) {
						  		// date:"1日"
								// fengli:"微风级"
								// fengxiang:"东风"
								// hightemp:"12℃"
								// lowtemp:"0℃"
								// type:"晴"
								// week:"星期四"
						    	// console.log(data.retData.forecast);
						    	for (var i = 0; i<data.retData.forecast.length; i++) {
						    		console.log(data.retData.forecast[i]);
						    		$("div").before("<ol><li>date:"+data.retData.forecast[i].date+"</li><li>fengli:"+data.retData.forecast[i].fengli+"</li><li>fengxiang:"+data.retData.forecast[i].fengxiang+"</li><li>hightemp:"+data.retData.forecast[i].hightemp+"</li><li>lowtemp:"+data.retData.forecast[i].lowtemp+"</li><li>type:"+data.retData.forecast[i].type+"</li><li>week:"+data.retData.forecast[i].week+"</li></ol><hr>");
						    	}
						    	//--------------------showDataEnd↑--------------------startUpdata↓--------------------
						    	jsonStr=JSON.stringify(data.retData.forecast);
						    	$.ajax({
						    		url:"dataCombing.php?cityName="+cityname+"&cityid="+cityid,
						    		type:"post",
						    		data:"datas="+jsonStr,
						    		dataType:'jsonp',
						    		success:function(data) {
						    			alert(data);
						    		}
						    	});
						    }
						});
				    }
				});
			});
		});
	</script>
</html>